<template>
  <footer>
    <ul>
      <router-link to="/films" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'huhunactive' : ''">
          电影~~>{{ isActive }}
          <!-- <ul>
            引入iconfont使用
          <li><i class= "iconfont icon-all"></i>1</li>
          <li>1</li>
          <li>2</li>
        </ul> -->
        </li>
      </router-link>

      <router-link to="/Center" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'huhunactive' : ''">
          中心~~>{{ isActive }}
        </li>
      </router-link>

      <router-link to="/order" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'huhunactive' : ''">
          我的订单{{ isActive }}
        </li>
      </router-link>

      <router-link to="/fileSwiper" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'huhunactive' : ''">
          我的Swiper{{ isActive }}
        </li>
      </router-link>
    </ul>
  </footer>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3.0625rem;
        background: white;
        ul{
            display: flex;
            li{
                // 自适应
                flex: 1;
                line-height: 3.0625rem;  //变成一半,变成上下显示
                text-align: center;
                display: flex;
                flex-direction: column;
            }
        }

    }
</style>
